/**
* @Description: 商品价格 - 详情页面
* @author  tangbin
* @date 2023/3/18
*/
<template>
  <div class="mh100">
    <div class="page-container">
      <!-- 商品价格信息 -->
      <div class="split-content-info">
        <!-- 标题 -->
        <div class="split-content-title clearfix">
          <div class="split-title">
            <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
            <span style="display: inline-block; color: #333333; font-size: 16px;">商品价格信息</span>
          </div>
        </div>
        <div>
          <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="商品编码">{{ form.code }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="商品名称">{{ form.goodsName }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="参图号">{{ form.goodsReferencedNumber }}</el-descriptions-item>
            <el-descriptions-item label="含税单价">{{ form.ratePrice }}</el-descriptions-item>
            <el-descriptions-item label="商品分类">{{ form.goodsClassName }}</el-descriptions-item>
            <el-descriptions-item label="商品类别">{{ getGoodsCategoryName(form.goodsCategory) }}</el-descriptions-item>
            <el-descriptions-item label="销售区域">{{ form.salesArea }}</el-descriptions-item>
            <el-descriptions-item label="销售行政区划">{{ form.divisionInfo && form.divisionInfo.toString() }}</el-descriptions-item>
            <el-descriptions-item label="供方编码">{{ form.supplierCode }}</el-descriptions-item>
            <el-descriptions-item label="商品状态">{{ getGoodsStatusName(form.goodsStatus) }}</el-descriptions-item>
            <el-descriptions-item label="价格状态">{{ getStatusName(form.status) }}</el-descriptions-item>
            <el-descriptions-item label="税率">{{ form.rate ? form.rate + '%' : '' }}</el-descriptions-item>
            <el-descriptions-item label="价格生效日期">{{ form.effectiveDate }}</el-descriptions-item>
            <el-descriptions-item label="价格失效日期">{{ form.expireDate }}</el-descriptions-item>
            <el-descriptions-item label="最后修改时间">{{ form.updateTime }}</el-descriptions-item>
            <el-descriptions-item label="最后修改人">{{ form.updaterName }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ form.remark }}</el-descriptions-item>
            <!-- <el-descriptions-item label=""></el-descriptions-item> -->
            <!-- <el-descriptions-item label=""></el-descriptions-item> -->
        </el-descriptions>
        </div>
      </div>

      <!-- 模块分割线 -->
      <div class="split-line"></div>
      <!-- 模块分割线 -->

      <!-- 基本信息 -->
      <div class="split-content-info">
        <!-- 标题 -->
        <div class="split-content-title clearfix">
          <div class="split-title">
            <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
            <span style="display: inline-block; color: #333333; font-size: 16px;">价目表信息</span>
          </div>
        </div>
        <div>
          <el-descriptions class="margin-top" :column="3" border>
            <!-- <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="价目表编码">{{ form.priceCode }}</el-descriptions-item> -->
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="价目表名称">{{ form.priceAlias }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="适用订单类型">{{ getPriceOrderTypeName(form.priceOrderType) }}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="价目表状态">{{ getPriceStatusName(form.priceStatus) }}</el-descriptions-item>
            <!-- <el-descriptions-item label="适用客户方式">{{ getPriceModeName(form.priceMode) }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="价目生效日期">{{ form.priceEffectiveDate }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="价目失效日期">{{ form.priceExpireDate }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="销售组织">{{ form.sellerName }}</el-descriptions-item> -->
            
            <!-- <el-descriptions-item label=""></el-descriptions-item> -->
        </el-descriptions>
        </div>
      </div>

      <!-- 模块分割线 -->
      <div class="split-line"></div>
      <!-- 模块分割线 -->

      <!-- 客户分类/客户列表 -->
      <div class="split-content-info">
        <!-- 标题 -->
        <div class="split-content-title clearfix">
          <div class="split-title">
            <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
            <span style="display: inline-block; color: #333333; font-size: 16px;">{{ form.priceMode == 'CUSTOMER_CLASS' ? '客户分类明细' : '客户明细' }}</span>
          </div>
        </div>
        <!-- :height="height" -->
        <!-- 'row-style': {height:'40px'}, -->
        <div>
          <el-table
            :data="dataList" 
            ref="filterTable"
            :style="{maxHeight: height + 'px', minHeight: 100 + 'px'}"
            :row-style="{height: '47px'}"
          >
          <el-table-column label="序号" align="left" type="index"  width="60"/>

          <el-table-column label="客户分类编码" align="left" prop="classCode" v-if="form.priceMode == 'CUSTOMER_CLASS'" />
          <el-table-column label="客户编码" align="left" prop="customerCode" v-else />
          <el-table-column label="客户分类名称" align="left" prop="className" show-overflow-tooltip v-if="form.priceMode == 'CUSTOMER_CLASS'" />
          <el-table-column label="客户名称" align="left" prop="customerName" show-overflow-tooltip v-else />
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryModel.pageNum"
            :limit.sync="queryModel.pageSize"
            @pagination="getCustomerClassList"
          />
        </div>
        
      </div>

      <div class="h84_line"></div>
      <div class="bottom-btn">
        <div class="bottom-locate" >
          <el-button type="primary" @click="cancel">返回</el-button>
          <!-- <el-button type="primary" :loading="saveloading" @click="save">确认</el-button> -->
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {getGoodsPriceDetail, getCustomerClassList, getCustomerList} from '@/api/basic/goodsPrice.js'
import {getTimeSeconds} from '@/utils/index.js'

export default {
  name: "PriceStrategyDetail",
  dicts: ['basic_data_division', 'order_type', 'price_customer_mode', 'price_use_status', 'basic_data_customer_type', 'price_goods_status', 'basic_data_goods_type', 'basic_data_goods_status'], // 可配置价目表
  data() {
    return {
      mountedTime: undefined, // mounted时间
      activatedTime: undefined, // activated时间
      goodsPriceId: this.$route.query.goodsPriceId, // 商品价格id
      form: {},
      queryModel: {
        priceId: undefined, // 价目表id
        pageNum: 1,
        pageSize: 10

      }, // 查询参数
      height: 380,
      dataList: [], // 客户分类列表
      total: 0, // 客户分类总条数
      loading: true,
    }
  },
  mounted() {
    this.mountedTime = new Date();
    this.goodsPriceId = this.$route.query.goodsPriceId; // 商品价格id
    this.getGoodsPriceDetail();
  },
  activated() {
    let isNew = false; // 默认不是新的
    if (this.goodsPriceId !== this.$route.query.goodsPriceId) {
      isNew = true; // 新的
    }
    this.goodsPriceId = this.$route.query.goodsPriceId; // 商品价格id
    this.activatedTime = new Date();
    // 得到秒数
    let seconds = getTimeSeconds(this.mountedTime, this.activatedTime);
    if (seconds >= 1 && isNew == true) {
      this.getGoodsPriceDetail();
    }
  },
  methods: {
    
    /**
     * 获取商品价格详情
     */
    getGoodsPriceDetail() {
      getGoodsPriceDetail({id: this.goodsPriceId}).then(res => {
        console.log('res=', res);
        if (res.code == 200) {
          this.form = res.data;
          this.queryModel.pageNum = 1;
          this.queryModel.priceId = this.form.priceId;
          // this.form.priceMode = 'CUSTOMER_CLA';
          if (this.form.priceMode == 'CUSTOMER_CLASS') { // 客户分类
            this.getCustomerClassList();
          } else { // 客户列表
            this.getCustomerList();
          }
          
        }
      }).catch(err => {

      });
    },

    /**
     * 获取使用状态名称
     * @param {*} value 
     */
    getPriceStatusName(value) {
      let show = "";
      this.dict.type.price_use_status.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 得到商品类别名称
     * @param {*} value 
     */
    getGoodsCategoryName(value) {
      let show = "";
      this.dict.type.basic_data_goods_type.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 得到商品状态名称
     * @param {*} value 
     */
    getGoodsStatusName(value) {
      let show = "";
      this.dict.type.basic_data_goods_status.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 获取订单类型名称
     * @param {*} value 
     */
    getPriceOrderTypeName(value) {
      let show = "";
      this.dict.type.order_type.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 获取适用客户方式名称
     * @param {*} value 
     */
    getPriceModeName(value) {
      let show = "";
      this.dict.type.price_customer_mode.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 价格状态
     * @param {*} value 
     */
    getStatusName(value) {
      let show = "";
      this.dict.type.price_goods_status.some((item) => {
        if (item.value === value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 分页获取符合查询条件的客户分类列表数据
     */
    getCustomerClassList() {
      this.loading = true;
      getCustomerClassList(this.queryModel).then(res => {
        if (res.code === 200) {
          this.dataList = res.data.records;
          this.total = Number(res.data.total);
        }
        this.loading = false;
      }).catch(err => {
        this.loading = false;
      });
    },

    /**
     * 得到客户列表
     */
    getCustomerList() {
      this.loading = true;
      getCustomerList(this.queryModel).then(res => {
        // console.log('客户列表=', res);
        if (res.code === 200) {
          this.dataList = res.data.records;
          this.total = Number(res.data.total);
        }
        this.loading = false;
      }).catch(err => {
        this.loading = false;
      });
    },

    /** 取消 */
    cancel() {
    //   this.$router.go(-1)
      const obj = { path: "/basicData/priceStrategy" };
      this.$tab.closeOpenPage(obj);
    },

  },
}
</script>

<style lang="scss" scoped>
</style>